<template>
    <div class="form-container">
      <star-canvas></star-canvas>
      <div class="change-password-form">
        <h2>修改密码</h2>
  
        <el-form :model="passwordForm" label-width="70px">
          <el-form-item label="旧密码">
            <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入旧密码" />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请确认新密码" />
          </el-form-item>
        <el-button type="primary" @click="submitChangePasswordForm">修改密码</el-button>
        </el-form>
      </div>
    </div>
  </template>
  
<script>
import { req_modifyPwd,req_logout } from '/src/api'
import StarCanvas from "../home-views/components/StarCanvas.vue";

export default {
  
  name: 'ChangePwdView',
  components: {StarCanvas},
  data() {
    return {
      passwordForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: ""
      }
    }
  },
  methods: {
    async submitChangePasswordForm() {
      if(!this.passwordForm.newPassword||!this.passwordForm.confirmPassword||!this.passwordForm.oldPassword)
      {
        ElMessage.info("不可以为空");
      }else{
        if(this.passwordForm.newPassword === this.passwordForm.confirmPassword){
          try {
            let response = await req_modifyPwd(this.passwordForm.oldPassword,this.passwordForm.newPassword)
            let data = response.data
            let errno = data['errno']
            ElMessage.info(data["msg"]);
            if(errno === 1){
              this.userLogout();
              this.$router.push("/login")
            }
          } catch (error) {
              ElMessage.error("error")
          }    
        }else{
          ElMessage.info("两次密码不一致");
        }
      }
      
    },
    async userLogout() {
      let response = await req_logout()
      let data = response.data
      if (data['errno'] === 1) {
        this.$store.commit('clearUser')
      }
      response2ElMessage(response)
    },
  },
}
</script>
<style scoped>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 140px);
}

.change-password-form {
  padding: 20px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  width: 300px;
}

.change-password-form h2 {
  text-align: center;
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
  margin-top: 10px;
}

.el-input {
  margin-bottom: 10px;
}
</style>
